<template>
  <div class="about">
    <h1>This is an about page</h1>
<!--    <div class="box" :style="`background-image: url(${imgUrl})`"></div>-->
<!--    <div class="box" :style="imgUrlStyle"></div>-->
    <div class="box" :style="{ backgroundImage: imgUrl}"></div>
<!--    <img :src="imgUrl" alt="">-->
  </div>
</template>

<script>
export default {
  name: "About",
  data() {
    return {
      imgUrl: "url('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')",
    }
  },
  computed: {
    imgUrlStyle() {
      return `background-image: url(${this.imgUrl})`
    }
  }
}
</script>

<style>
.box {
  height: 200px;
  width: 500px;
  border: 2px solid #000;
}
</style>
